﻿@using DataAccess;
@model PetInfo
@{
    ViewData["Title"] = "宠物信息";
}
@section Style {
    <style>
        .petInfoDiv a {
            text-decoration: none;
            color: black;
            font-size: 15px;
        }

        .petInfoDiv a:hover {
            text-decoration: underline;
            color: RoyalBlue;
        }

        /* card组件样式 */
        .clearfix:before,
        .clearfix:after {
            display: table;
            content: "";
        }

        .clearfix:after {
            clear: both
        }

        .el-card__body {
            background-color: white;
            padding: 0px !important;
            height: 260px;
            font-size: 15px;
        }

        .input-box .el-col-5 {
            max-width: 20%;
            flex: 0 0 20%;
        }

        .elCardInfo span {
            font-weight: bold;
        }
    </style>
}
<div style="width:1020px;margin:auto;" class="petInfoDiv">
    <div style="margin-top:25px;font-size:22px;font-weight:bold;">@Model.nickname</div>
    <div style="text-align:left;margin-top:15px;padding-left:300px;padding-right:200px;">
        <span style="font-size:16px;font-weight:bold">品种：</span><span style="font-size:15px;">@Model.breed</span>
        <span style="font-size:16px;font-weight:bold;margin-left:15px;">价格：</span><span style="font-size:15px;">@Model.price</span>
        <span style="font-size:16px;font-weight:bold;margin-left:15px;">数量：</span><span style="font-size:15px;">@Model.stock</span>
        @{
            Model.age = Model.age ?? 12;
            if (Model.age  < 12)
            {
                <span style="font-size:16px;font-weight:bold;margin-left:15px;">年龄（月）：</span><span style="font-size:15px;">@Model.age</span>
            }
            else
            {
                int iyear = Model.age.Value / 12;
                int imonth = Model.age.Value % 12;
                string showInfo ="";
                if(imonth == 0)
                {
                    showInfo = iyear + "（岁）";
                }
                else
                {
                    showInfo = iyear + "（年 ）" + imonth + "（月）";
                }
                <span style="font-size:16px;font-weight:bold;margin-left:15px;">年龄：</span>
                <span style="font-size:15px;">@showInfo</span>
            }
        }
     </div>
    <div style="text-align:left;margin-top:10px;padding-left:300px;padding-right:200px;line-height:30px;">
        <span style="font-size:16px;font-weight:bold;">绝育情况：</span><span style="font-size:15px;">@Model.sterstatus</span>
        <span style="font-size:16px;font-weight:bold;margin-left:15px;">疫苗情况：</span><span style="font-size:15px;">@Model.vaccinstatus</span>
    </div>
    <div style="text-align:left;margin-top:10px;padding-left:300px;padding-right:200px;line-height:30px;">
        <span style="font-size:16px;font-weight:bold;">高度（米）：</span><span style="font-size:15px;">@Model.height</span>
        <span style="font-size:16px;font-weight:bold;margin-left:15px;">长度（米）：</span><span style="font-size:15px;">@Model.length</span>
        <span style="font-size:16px;font-weight:bold;margin-left:15px;">体重（公斤）：</span><span style="font-size:15px;">@Model.weight</span>
        <span style="font-size:16px;font-weight:bold;margin-left:15px;">性别：</span><span style="font-size:15px;">@Model.gender</span>
    </div>
    <div style="text-align:left;margin-bottom:20px;margin-top:10px;padding-left:300px;padding-right:200px;line-height:30px;">
        <span style="font-size:16px;font-weight:bold;">备注：</span><span style="font-size:15px;">@Model.remark</span>
    </div>
    <div style="background-color:black;height:1px; border:none;margin-top:20px;"></div>
    <div style="margin-top:20px;display:flex;">
        <div style="float:left;width:650px;margin-right:50px;">
            <div>
                <img src='/file/@ViewData["subDomain"]/imgs/@Model.coverimgsrc' style="width:650px; height:400px;" />
            </div>
        </div>
        <div id="advertDiv" style="height:258px;width:320px;background-color:silver;float:left;">
            <div style="background-color:#f5f5f5;color:gray;font-size:13px;">广告</div>
            <a href='@ViewData["blockAdvertUrl"]' target="_blank" @@click="advertClickHandle(@ViewData["blockAdvertID"])"><img src='@ViewData["blockAdvertImg"]' style="width:320px; height:240px;" /></a>
        </div>
    </div>
    @{
        if (!string.IsNullOrEmpty(Model.videosrc))
        {
            <div style="border:1px solid;border-color:silver;background-color:lightgray;width:650px;margin:auto;height:400px;margin-top:20px;display:flex;">
                <video width="650" height="400" controls src="/file/@ViewData["subDomain"]/videos/@Model.videosrc">
                    <source  type="video/mp4">
                    <source  type="video/avi">
                    <source  type="video/webm">
                    您的浏览器不支持 video 属性。
                </video>
            </div>
        }
    }
    @{
        if (!string.IsNullOrEmpty(Model.otherimgsrc))
        {
            <div style="margin-top:40px;text-align:left;font-size:20px;font-weight:bold;">美颜集</div>
            <div style="background-color:black;height:1px; border:none;margin-top:10px;"></div>

            string[] imgUrls = Model.otherimgsrc.Split('|');
            for (int i = 0; i < imgUrls.Length; i++)
            {
                string imgurl = imgUrls[i];
                if (i == 0)
                {
                    <div style="float:left;margin-top:20px;"><img src='/file/@ViewData["subDomain"]/imgs/@imgurl' style="width:326px; height:220px;" /></div>
                }
                else
                {
                    <div style="float:left;margin-top:20px;margin-left:20px;"><img src='/file/@ViewData["subDomain"]/imgs/@imgurl' style="width:326px; height:220px;" /></div>
                }
            }
        }
    }
    <div style="clear:both;"></div>
    @{
        if (ViewData["otherPetInfo"].ToString() != "[]")
        {
            <div style="margin-top:40px;text-align:left;font-size:20px;font-weight:bold;">相似爱宠</div>
            <div style="background-color:black;height:1px; border:none;margin-top:10px;"></div>
            <div style="margin-top:20px;">
                <el-row v-for="(ro, indexRo) in 1" style="margin-top:12px;background-color:white;" :gutter="15" class="input-box">
                    <el-col :span="6" v-for="(co, indexCo) in otherPetInfo">
                        <el-card style="box-shadow:none;">
                            <a :href="co.navurl" target="_blank" title="点击查看详细信息"><img :src="co.src" style="width:100%;height:166px;"></a>
                            <div style="padding: 0px; text-align:left;" class="elCardInfo">
                                <div><span>名字：</span>{{co.nickname}}</div>
                                <div><span>品种：</span>{{co.breed}}</div>
                                <div><span>价格：</span>{{co.price}}</div>
                                <div><span>绝育&疫苗：</span>{{co.sterstatus}}&{{co.vaccinstatus}}</div>
                            </div>
                        </el-card>
                    </el-col>
                </el-row>
            </div>
        }
    }
    <div style="margin-bottom:30px;clear:both;"></div>
</div>
@section Scripts {
    <script type="text/javascript">
        $("#firstPage").css("color", "red");

        var app = new Vue({
            el: "#app",
            mounted: async function () {
                let that = this;
                $("#app").show();//vue渲染完后显示界面
            },
            methods: {
                advertClickHandle(val) {
                    axios.post('../Home/AdvertClick', {
                        "advertID": val
                    }).then(response => {
                        console.log(response.data);
                    }, error => {
                        alert("错误提示：" + error.message);
                    });
                },
            },
            data() {
                return {
                    otherPetInfo: @Html.Raw(ViewData["otherPetInfo"]),
                }
            }
        });
    </script>
}

